<template>


        <div class="activity-list-wrap">

            <search @search="search"></search>

            <div class="top">

                <!--<i class="iconfont icon-fanhui" @click="back()"></i>-->
                <z-history :type="1"></z-history>
                <span>活动</span>

            </div>
            <nav-select @select="sort" class="nav-filter" :list="sortList"></nav-select>

            <div id="mescroll" class="mescroll" v-mescroll="{up:'upCallback',size:page.pageSize,num:page.pageNo}">
                <div class="mescroll-bounce">
                    <div class="wrapper">

                        <activity-list :list='activityList' class="list-out"></activity-list>
                        <div class="empty" v-if="activityList.length*1===0">
                            <img class="empty-img" src="../../assets/image/empty.png" alt="">
                            <div class="text-line">空空如也</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!--<z-footer></z-footer>-->

</template>

<script>
    import {appService} from '../../service/appService'
    import {actService} from '../../service/activityService'
    import activitylist from '../../component/list/activity-list.vue'
    import navselect from '../../component/common/select.vue'
    import searchbtn from '../../component/common/search_fixed.vue'


    export default {
        components: {'activity-list': activitylist, 'nav-select': navselect, 'search': searchbtn,},
        // 添加以下代码
        metaInfo() {
            // console.log(this);
            const title = '活动'
            const desc = this.shareData.desc || '运联-活动列表'
            return {
                title,
                meta: [
                    {vmid: 'description', name: 'description', content: desc},
                    {vmid: 'keyWords', name: 'keyWords', content: '运联'},
                ]
            }
        },
        data() {
            return {
                count: 1,
                params: {sortKey: 'sortNumber'},
            }
        },
        asyncData({store, route}) {
            store.state.homeStore.page = {pageNo: 1, pageSize: 5, sortKey: 'sortNumber'}
            let list = [
                {
                    title: "举办时间",
                    value: 'time',
                    options: [
                        {name: '全部', value: ''},
                        {name: '今天', value: 'today'},
                        {name: '明天', value: 'tomorrow'},
                        {name: '本周', value: 'week'},
                        {name: '本周末', value: 'weekend'},
                        {name: '本月', value: 'month'}
                    ],
                },
                {
                    title: "活动主题",
                    value: 'actThemeId',
                    options: [],
                },
                {
                    title: "活动城市",
                    value: 'city',
                    options: [
                        {name: '全部', value: ''},
                        {name: '北京', value: '北京'}, {name: '上海', value: '上海'}, {name: '广州', value: '广州'}, {
                            name: '深圳',
                            value: '深圳'
                        },
                        {name: '杭州', value: '杭州'}, {name: '成都', value: '成都'}, {name: '南京', value: '南京'}, {
                            name: '苏州',
                            value: '苏州'
                        },
                        {name: '武汉', value: '武汉'}, {name: '天津', value: '天津'}, {name: '重庆', value: '重庆'}, {
                            name: '西安',
                            value: '西安'
                        },
                        {name: '厦门', value: '厦门'}, {name: '宁波', value: '宁波'}, {name: '郑州', value: '郑州'}, {
                            name: '青岛',
                            value: '青岛'
                        },
                    ],
                },
                {
                    title: "综合排序",
                    value: 'sortKey',
                    options: [
                        {name: '综合排序', value: 'sortNumber'},
                        {name: '最新发布', value: 'publishTime'},
                        {name: '最近开始', value: 'actEndTime'},
                        {name: '热门点击', value: 'actReadNum'}
                    ],
                },
            ];

            function getactivities() {
                return actService.getactivities(store.state.homeStore.page).then(function (res) {
                    store.state.homeStore.activityList = res.data.datas.datas
                    store.state.homeStore.page.total = res.data.datas.totalPage
                    store.state.homeStore.page.pageNo = 2
                })
            }

            function getthemes() {
                let params = {type: 4}
                return actService.getThemes(params).then(function (res) {
                    let themeList = {
                        title: "活动主题",
                        value: 'actThemeId',
                        options: [
                            {name: '全部', value: ''}
                        ],
                    }
                    let data = res.data.datas
                    for (let i in data) {
                        console.log(i);
                        themeList.options.push({
                            name: data[i].tagName,
                            value: data[i].id,
                        })
                    }
                    list.splice(1, 1, themeList)
                    store.state.homeStore.sortList = list
                })
            }

            let params = {
                type: 21
            }

            function getshare() {
                appService.getshare(params).then(function (res) {
                    store.state.shareData = res.data.datas
                    console.log(res.data.datas);
                })
            }

            return Promise.all([
                getactivities(), getthemes(), getshare()
            ])

        },
        computed: {
            //将存在store中的数据取出
            activityList: {
                // getter
                get: function () {
                    return this.$store.state.homeStore.activityList || []
                },
                // setter
                set: function (newValue) {
                    return newValue
                }
            },
            sortList: {
                get: function () {
                    return this.$store.state.homeStore.sortList || []
                },
                set: function (newValue) {
                    return newValue
                }
            },
            shareData: {
                get: function () {
                    return this.$store.state.shareData || []
                },
                set: function (newValue) {
                    return newValue
                }
            },
            page: {
                get: function () {
                    return this.$store.state.homeStore.page || []
                },
                set: function (newValue) {
                    return newValue
                }
            },
        },
        mounted: function () {
            let that = this
//            that.getList()

            let params = {type: 5}

            /*
             * 微信分享设置
             * type查看规则列表写死，
             * text.name为文章标题
             * */
            let share = {
                hasGet: true,
                title: that.shareData.title || '运联-活动列表',
                imageUrl: that.shareData.imgUrl,
                brief: that.shareData.desc || '点击查看详情',
                url: that.shareData.dataUrl || window.location.href
            }
            appService.getWxJssdk().then(function () {
                appService.getWxShare(share, '运联-活动列表')
            })
        },
        methods: {
            //搜索，带关键字跳转搜索页
            search: function (v) {
                let that = this
                that.$router.replace({name: 'search', params: {type: 5, query: v}})
            },
            //获取列表
            getList: function () {
                let that = this
                let store = that.$store
                that.params.pageNo = that.page.pageNo
                that.params.pageSize = that.page.pageSize
                // console.log(that.params);
                actService.getactivities(that.params).then(function (res) {
                    if (!res.data || !res.data.datas) return
                    let list = res.data.datas.datas
                    if (that.page.pageNo * 1 === 1) {
                        store.state.homeStore.activityList = res.data.datas.datas
                    } else {
                        for (let i in list) {
                            store.state.homeStore.activityList.push(list[i])
                        }
                    }
                    that.page.pageNo += 1
                    that.mescroll.endSuccess(list.length);
                })
            },
            //上拉
            sort: function (i) {
                let that = this
                that.page.pageNo = 1
                that.params[i.name] = i.value
                that.getList()
            },
            //上拉
            upCallback: function () {
                this.getList()
            },
        }
    }
</script>

<style lang="less">
    @import url("../../assets/css/mescroll.min.css");

    .activity-list-wrap {
        .top {
            top:0.9rem;
            width: 100%;
            height: 1.1733rem;
            line-height: 1.1733rem;
            /*height: 1.1733rem;*/
            /*line-height: 1.1733rem;*/
            text-align: center;
            font-size: 0.48rem;
            color: #333;
            letter-spacing: 0.3px;
            background: #fff;
            border-bottom: 1px solid rgba(221, 221, 221, 0.5);
            z-index: 100;
            position: fixed;
        }
        .mescroll {
            background: #fff;
        }
        .nav-filter {
            position: fixed;
            width: 100%;
            z-index: 99;
            top: 2.09rem;
        }
        .list-out {
            padding-top: 3.4667rem;
        }

        .empty {
            text-align: center;
            position: absolute;
            background: #fff;
            padding-top: 100px;
            width: 100%;
            z-index: 9;
            top: 2.3rem;
            .empty-img {
                height: 140px;
            }
            .text-line {
                text-align: center;
                padding-top: 20px;
                font-size: 15px;
                color: #999999;
                letter-spacing: 1.25px;
            }
        }

    }

</style>
